<template>
  <div class="drag-menu">
    <div v-if="type !== 2" class="drag-menu-item" @click="parentExpand">
      <i class="el-icon-s-fold" />
      <span>展开父节点</span>
    </div>
    <div v-if="type !== 1" class="drag-menu-item " @click="childrenExpand">
      <i class="el-icon-tickets" />
      <span>展开子节点</span>
    </div>
    <div class="drag-menu-item " @click="addPaging">
      <i class="el-icon-tickets" />
      <span>添加分页节点</span>
    </div>
    <div class="drag-menu-item border" @click="nodeDetail">
      <i class="el-icon-tickets" />
      <span>查看详情</span>
    </div>
    <div class="drag-menu-item" @click="nodeCopy">
      <i class="el-icon-document-copy" />
      <span>复制表名</span>
    </div>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Menu',
  props: {
    type: {
      type: Number,
      default: 0
    }
  },
  methods: {
    parentExpand() {
      this.$emit('parentExpand')
    },
    nodeCopy() {
      this.$emit('nodeCopy')
    },
    nodeDetail() {
      this.$emit('nodeDetail')
    },
    childrenExpand() {
      this.$emit('childrenExpand')
    },
    addPaging(){
      this.$emit('addPaging')
    }
  }
}
</script>

<style scoped>
.drag-menu {
  position: absolute;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 8px 0;
  font-size: 10px !important;
  cursor: pointer;
  color: #606266;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
  text-overflow: ellipsis;
  vertical-align: middle;
}

.drag-menu-item {
  padding: 5px 8px;
  transition: color 0.2s;
  display: flex;
  align-items: center;


}
.drag-menu-item i {
  font-weight: 400;
  margin-right: 6px;
}

.drag-menu-item:hover {
   background-color: #ecf5ff;
   color: #66b1ff;
 }


.border{
  border-bottom:1px solid #ebeef5;

}


</style>
